<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片打开效果</title>
    <script src="../lib/jquery-3.5.1.js"></script>
    <style>
        body{
            padding: 0px;
            margin: 0px;
        }
        .imgs {
            width: 100px;
            height: 100px;
        }

        .backgorund_gray {
            
            background-color: rgb(0, 0, 0,0.5);
            position: absolute;
            z-index: 2;
            display: none;
        }
        
        .showImage{
            display: none;
            margin: 0 auto;
        }
        .imgTeam{
            position: absolute;
            z-index: 1;
        }
        .flex_showImage{
            display: flex;
            justify-content: center;

        }
        .flex_showImage_1{
            z-index: 3;
            display: flex;
            align-items: center;
        }
        .btn1,.btn2{
            position: absolute;
            top: 50%;
        }
    </style>
</head>

<body>
    
        <div class="imgTeam">
            <img class="imgs" src="../img/1.jpg" alt="">
            <img class="imgs" src="../img/2.jpg" alt="">
            <img class="imgs" src="../img/3.jpg" alt="">
            <img class="imgs" src="../img/4.jpg" alt="">
        </div>
        <div class="backgorund_gray">
        </div>
        <div class="showImage">
            <div class="flex_showImage">
                <div class="flex_showImage_1">
                    <div><button class="btn1">上一张图片</button></div>
                    <div>
                        <img class="showImage_1" src="../img/3.jpg" alt="">
                    </div>
                    <div>
                        <button class="btn2">下一张图片</button>
                    </div>
                </div>
            </div>
        </div>

    <script>
        var height =  $(window).height();
        var width =  $(window).width();
        $(function(){
            // 背景颜色是铺满全屏的
            $(".backgorund_gray").css({"height":height,"width":width})

            //点击图片的时候
            $(".imgs").click(function(){
                var index = $(this).index();
                // alert(index);
                $(".backgorund_gray").show();
                $(".showImage").show();
                $(".showImage_1").height(height*0.8);
                $(".showImage_1").css("marginTop",height*0.1);

                //上一个图片按钮或者下一个图片按钮
                $(".btn1").click(function(){
                    alert("来了");
                    if(index<1){
                        index = 4;
                    }
                    $('.showImage_1').attr('src', `../img/${index--}.jpg`);
                });

                $(".btn2").click(function(){
                    alert("来了");
                    if(index>4){
                        index = 1;
                    }
                    $('.showImage_1').attr('src', `../img/${index++}.jpg`);
                });
            });

            $(".backgorund_gray").click(function(){
                $(".backgorund_gray").hide();
                $(".showImage").hide();
            });

        })
    </script>
</body>

</html>